<template>
  <div class="star-box-pablish" id="template3-box">
    <t-popup
      attach="#template3-box"
      overlayClassName="popup"
      class="placement top center"
      content="将此展览添加到我的关注"
      placement="left"
      showArrow
      destroyOnClose
    >
      <div class="star-box-pablish" @click="setFollow">
        <!-- <img src="//static.jiyi.show/assets/img/templateStartActive.png" alt="" v-if="FollowType" />
        <img src="https://static.jiyi.show/template/template5/template5Shearicon4.png" alt="" v-else /> -->
        <span class="iconfonts" v-if="FollowType">&#xe68c;</span>
        <span class="iconfonts" v-else>&#xe68d;</span>
      </div>
    </t-popup>
    <messageModel
      submitText="前往"
      title="提示"
      :visible="visibleMessage1"
      problem="您暂未登录"
      message="是否前往登录？"
      @closeClick="closeClick"
      @submitClick="pathSubmitClick"
    />
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import { doorUrl } from '@/utils/minxin';
import { outLogin } from '@/utils/minxin';
import messageModel from '@/components/messageModel/index.vue';
import { getHeardToken } from '@/api/utils';
import { pathList } from './data';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { tem2Store, useProjectStore } from '@/store';
import { templateIsFollow } from '@/api/project/project';
import { AddFollow } from '@/api/door/door';

const visibleMessage1 = ref(false);
const store = useProjectStore();
const template2Store = tem2Store();
const route = useRoute();
const FollowType = ref(false);
const init = () => {
  templateIsFollow(localStorage.getItem('projectId')).then((res) => {
    if (res.statusCode == 200) {
      FollowType.value = res.data;
      console.log('FollowType.value', res.data);
    }
  });
};
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登陆

  visibleMessage1.value = false;
  let url = window.location.href;
  let redirectUrl = doorUrl + 'login?redirect=' + url;
  // window.location.href = redirectUrl;
  outLogin(redirectUrl);
};
const setFollow = async () => {
  console.log('9999');

  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  try {
    let { data } = await AddFollow({
      refType: 3,
      refId: localStorage.getItem('projectId'),
    });
    FollowType.value = data;
  } catch {}
};
init();
</script>

<style scoped lang="less">
.star-box-pablish {
  cursor: pointer;
  position: fixed;
  z-index: 666;
  bottom: 80px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  .iconfonts {
    // font-size: 30px;
    font-size: 20px;
    color: #fff;
  }
}
#template3-box {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    width: 200px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
}
.pop1 {
  ::v-deep & {
    background: #cfbda8;
  }
}
.pop2 {
  ::v-deep & {
    background: #8f9ebf;
  }
}
.pop3 {
  ::v-deep & {
    background: #b9463f;
  }
}
.pop4 {
  ::v-deep & {
    background: #343029;
  }
}
.pop5 {
  ::v-deep & {
    background: #171719;
  }
}
</style>
